<template>
  <div class="pieBar" ref="pieBar">
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
const toolarr = ['Unstart','Execute','Finished','Expired']
var that
  export default {
    name: "pieBar",
    mixins: [resize],
    props:{
      title:'',
      name: '',
      dataList: {},
      rend: false
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      that = this
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    watch:{
      rend(){
        this.initChart(true)  
      }
    },
    methods: {
      initChart(flag) {
        this.chart = echarts.init(this.$refs.pieBar)
        this.chart.setOption({
          tooltip: {
          },
          // title:{
          //   text: this.title,
          //   left: 'center',
          // },
          legend: {
            y: 'bottom',
            data: ['未开始', '进行中', '完成', '延期完成', '延期未完成'],
          },
          grid: {
            top: '57%',
            left: '8%',
            right: '10%',
            bottom: '50px',
            containLabel: true
          },
          xAxis: {
            minInterval: 1,
            type: 'value'
          },
          yAxis: {
            show:false,
            type: 'category',
            data: ['未开始','进行中','完成','延期完成','延期未完成'],
          },
          series: [
            {
              name: this.name,
              type: 'pie',
              radius: [0, '30%'],
              center: ['53%', '35%'],
              itemStyle: {
                color: function(params){
                  var colorList = ['#409EFF','#E6A23C','#67C23A','#9966ff','#F56C6C'];
                  return colorList[params.dataIndex]
                }
              },
              label: {
                // show: false,
                normal:{
                  formatter:(e)=>{
                    let data = e.data;
                    // console.log(data)
                    if(data.value>0){
                      data.label={show:true};
                      data.labelLine={show:true};
                    }
                  }
                }
              },
              emphasis: {
                focus: 'series'
              },
              data: [{name:'未开始',value:this.dataList.Unstart.length,label:{show:this.dataList.Unstart.length>0}},{name:'进行中',value:this.dataList.Execute.length,label:{show:this.dataList.Execute.length>0}},{name:'完成',value:this.dataList.Finished.length,label:{show:this.dataList.Finished.length>0}},{name:'延期完成',value:this.dataList.Dfinished.length,label:{show:this.dataList.Dfinished.length>0}},{name:'延期未完成',value:this.dataList.Expired.length,label:{show:this.dataList.Expired.length>0}}]
            },
            {
              name: this.name,
              type: 'bar',
              stack: 'chart',
              itemStyle: {
                color: function(params){
                  var colorList = ['#409EFF','#E6A23C','#67C23A','#9966ff','#F56C6C'];
                  return colorList[params.dataIndex]
                }
              },
              label: {
                show: false 
                // normal:{
                //   formatter:(e)=>{
                //     let data = e.data;
                //     if(data.value==0){
                //       data.label={show:false};
                //       data.labelLine={show:false};
                //     }
                //   }
                // }
              },
              emphasis: {
                focus: 'series'
              },
              data: [this.dataList.Unstart.length,this.dataList.Execute.length,this.dataList.Finished.length,this.dataList.Dfinished.length,this.dataList.Expired.length]
            },
          ]
        })
        if(flag){
          this.chart.on('click',function(params){
            that.$emit('handleClick',{first:params.seriesName,second:toolarr[params.dataIndex]})
          })
        }
      },
    }
  }
</script>
<style lang="scss" scoped>
  .pieBar {
    width: 100%;
    min-height: 330px;
    height: 100%;
  }
</style>
